body {
	font-family: 'Arial', sans-serif;
	background-color: #f7f7f7;
	margin: 0;
	padding: 20px;
}

table {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th,
td {
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

th {
	background-color: #007bff;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}

tr:hover {
	background-color: #eaeaea;
}

@media (max-width: 600px) {

	th,
	td {
		display: block;
		width: 100%;
	}

	tr {
		margin-bottom: 15px;
	}

	th,
	td {
		text-align: right;
	}

	th::before {
		content: attr(data-label);
		float: left;
		font-weight: normal;
	}
}

.tableDiv {
	width: 2000px;
	padding: 20px;
	/* 设置内边距 */
	background-color: rgba(128, 128, 128, 0.5);
	/* 灰色半透明背景 */
	border-radius: 10px;
	/* 设置圆角半径 */
	margin: 20px;
	/* 设置外边距 */
	transition: all 0.3s ease;
	/* 平滑过渡效果 */
}

.tableDiv:hover {
	transform: scale(1.1);
	/* 鼠标悬停时放大1.1倍 */
}

table {
	width: 100%;
	/* 表格宽度与div相同 */
}

.button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #007bff;
	color: white;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.button:hover {
	background-color: #0056b3;
}

.button:active {
	background-color: #004c99;
}

.button:disabled {
	background-color: #cccccc;
	cursor: not-allowed;
}
.button>a{
	color: white;
	font-size: 10px;
}